<!--竞猜足球-混合选购 -->
<template>
	<view>
		<uni-collapse ref="collapse">
			<uni-collapse-item style="background-color: #f5f5f5;" :open="true" v-for="(d,i) in state.datas" :key="i">
				<template v-slot:title>
					<view class="collapse-item">
						<view class="collapse-item-title">
							<text class="ml10">{{d.businessDate}}</text>
							<text class="ml10">{{d.week}}</text>
							<text class="ml10">共
								<text style="color: red;">{{d.num}}</text>
								场比赛
							</text>
							<text class="ml10">截止{{d.overTime}}</text>
						</view>
					</view>
				</template>
				<view class="content">
					<view class="match-body" v-for="match in d.matchList">
						<view class="match-title">
							<view class="left">
								<p>{{match.matchNumStr}}</p>
								<p class="match-type">{{match.leagueAbbName}}</p>
							</view>
							<view class="team-info">
								<view>
									<text class="gray-text">[01]</text>
									<text class="team-name">{{match.homeTeamAbbName}}</text>
								</view>
								<view class="gray-text match-time">
									<p>{{match.matchDateStr}}</p>
									<p>{{match.matchTime}}</p>
								</view>
								<view>
									<text class="team-name">{{match.awayTeamAbbName}}</text>
									<text class="gray-text">[02]</text>
								</view>
							</view>
							<view class="right">
								<text class="gray-text">分析</text>
							</view>
						</view>
						<view class="match-data">
							<view>
								<view class="data-item" v-if="match.spfBonus.s.v==0">
									<view class="data-item-view">
										<text class="game-rs"></text>
									</view>
								</view>
								<view v-else class="data-item" style="position: relative;"
									:class="match.spfBonus.s.x?'select-game-data':''"
									@click="selectData(match,'spf',match.spfBonus.s,match.spfBonus.single)">
									<image src="@/static/images/danguan.png" v-if="match.spfBonus.single"></image>
									<view class="data-item-view">
										<text class="game-rs">{{match.spfBonus.s.n}}</text>
										<text class="game-ps">{{match.spfBonus.s.v}}</text>
									</view>
								</view>

								<view class="data-item" :class="match.rspfBonus.s.x?'select-game-data':''"
									style="position: relative;"
									@click="selectData(match,'rspf',match.rspfBonus.s,match.rspfBonus.single)">
									<image src="@/static/images/danguan.png" v-if="match.rspfBonus.single"></image>
									<view class="data-item-view">
										<text class="game-rq-red">{{match.rspfBonus.goalline}}</text>
										<text class="game-rs">{{match.rspfBonus.s.n}}</text>
										<text class="game-ps">{{match.rspfBonus.s.v}}</text>
									</view>
								</view>
							</view>
							<view>
								<view class="data-item" v-if="match.spfBonus.s.v==0">
									<view class="data-item-view">
										<text class="game-rs">未开</text>
									</view>
								</view>
								<view v-else class="data-item" :class="match.spfBonus.p.x?'select-game-data':''"
									@click="selectData(match,'spf',match.spfBonus.p,match.spfBonus.single)">
									<view class="data-item-view">
										<text class="game-rs">{{match.spfBonus.p.n}}</text>
										<text class="game-ps">{{match.spfBonus.p.v}}</text>
									</view>
								</view>
								<view class="data-item" :class="match.rspfBonus.p.x?'select-game-data':''"
									@click="selectData(match,'rspf',match.rspfBonus.p,match.rspfBonus.single)">
									<view class="data-item-view">
										<text class="game-rq-red">{{match.rspfBonus.goalline}}</text>
										<text class="game-rs">{{match.rspfBonus.p.n}}</text>
										<text class="game-ps">{{match.rspfBonus.p.v}}</text>
									</view>
								</view>
							</view>
							<view>
								<view class="data-item" v-if="match.spfBonus.s.v==0">
									<view class="data-item-view">
										<text class="game-rs"></text>
									</view>
								</view>
								<view v-else class="data-item" :class="match.spfBonus.f.x?'select-game-data':''"
									@click="selectData(match,'spf',match.spfBonus.f,match.spfBonus.single)">
									<view class="data-item-view">
										<text class="game-rs">{{match.spfBonus.f.n}}</text>
										<text class="game-ps">{{match.spfBonus.f.v}}</text>
									</view>

								</view>
								<view class="data-item" :class="match.rspfBonus.f.x?'select-game-data':''"
									@click="selectData(match,'rspf',match.rspfBonus.f,match.rspfBonus.single)">
									<view class="data-item-view">
										<text class="game-rq-red">{{match.rspfBonus.goalline}}</text>
										<text class="game-rs">{{match.rspfBonus.f.n}}</text>
										<text class="game-ps">{{match.rspfBonus.f.v}}</text>
									</view>
								</view>
							</view>
							<view class="data-item">
								<view style="height: 20%;position: relative;text-align: center;"
									@click="openMatchMoreDataModel(match)">
									<text>更多</text>
									<view v-if="match.selectItemNum"
										style="border: 1px solid red;border-radius: 10px;color: white;background-color: red;width: 20px;top:-20px;left:27px;position: absolute;">
										{{match.selectItemNum}}
									</view>
								</view>
								<view class="gray-text" @click="match.showMatchData = match.showMatchData?false:true"
									style="border-top: 1px solid #cacaca;margin-top: 13px;padding-top: 10px;text-align: center;">
									<text>数据</text>
									<text :class="match.showMatchData?'cicon-drop-up':'cicon-drop-down'" />
								</view>
							</view>

						</view>
						<football-data v-if="match.showMatchData" />
					</view>
				</view>
			</uni-collapse-item>

		</uni-collapse>

		<!-- 竞猜数据一场比赛的更多选项弹窗 -->
		<su-popup :show="state.showMatchMoreDataModel" type="bottom" round="10" @change="matchMoreDataModelChange"
			:space="20" :zIndex="9000" :showClose="true">
			<view class="popup-body">
				<view class="match-title">
					<view class="left">
						<p>{{state.popupData.matchNumStr}}</p>
					</view>
					<view class="team-info">
						<view>
							<text class="gray-text">[02]</text>
							<text class="team-name">{{state.popupData.homeTeamAbbName}}</text>
						</view>
						<view class="gray-text match-time">
							<p>{{state.popupData.matchTime}}</p>
						</view>
						<view>
							<text class="team-name">{{state.popupData.awayTeamAbbName}}</text>
							<text class="gray-text">[01]</text>
						</view>
					</view>
					<view class="right">
						<p class="popup-match-type">{{state.popupData.leagueAbbName}}</p>
					</view>
				</view>

				<view class="popup-data spf">
					<table>
						<tr>
							<td width="10%" style="position: relative;" class="dangguan-bg">0
								<image src="@/static/images/danguan.png" v-if="state.popupData.spfBonus.single"></image>
							</td>
							<td width="30%" :class="state.popupData.spfBonus.s.x?'select-game-data':''"
								@click="selectData(state.popupData,'spf',state.popupData.spfBonus.s,state.popupData.spfBonus.single)">
								<text class="data-name">{{state.popupData.spfBonus.s.n}}</text>
								<text class="data-value">{{state.popupData.spfBonus.s.v}}</text>
							</td>
							<td width="30%" :class="state.popupData.spfBonus.p.x?'select-game-data':''"
								@click="selectData(state.popupData,'spf',state.popupData.spfBonus.p,state.popupData.spfBonus.single)">
								<text class="data-name">{{state.popupData.spfBonus.p.n}}</text>
								<text class="data-value">{{state.popupData.spfBonus.p.v}}</text>
							</td>
							<td width="30%" :class="state.popupData.spfBonus.f.x?'select-game-data':''"
								@click="selectData(state.popupData,'spf',state.popupData.spfBonus.f,state.popupData.spfBonus.single)">
								<text class="data-name">{{state.popupData.spfBonus.f.n}}</text>
								<text class="data-value">{{state.popupData.spfBonus.f.v}}</text>
							</td>
						</tr>
						<tr>
							<td class="dangguan-no-bg" style="position: relative;">
								{{state.popupData.rspfBonus.goalline}}
								<image src="@/static/images/danguan.png" v-if="state.popupData.rspfBonus.single">
								</image>
							</td>
							<td :class="state.popupData.rspfBonus.s.x?'select-game-data':''"
								@click="selectData(state.popupData,'rspf',state.popupData.rspfBonus.s,state.popupData.rspfBonus.single)">
								<text class="data-name">{{state.popupData.rspfBonus.s.n}}</text>
								<text class="data-value">{{state.popupData.rspfBonus.s.v}}</text>
							</td>
							<td :class="state.popupData.rspfBonus.p.x?'select-game-data':''"
								@click="selectData(state.popupData,'rspf',state.popupData.rspfBonus.p,state.popupData.rspfBonus.single)">
								<text class="data-name">{{state.popupData.rspfBonus.p.n}}</text>
								<text class="data-value">{{state.popupData.rspfBonus.p.v}}</text>
							</td>
							<td :class="state.popupData.rspfBonus.f.x?'select-game-data':''"
								@click="selectData(state.popupData,'rspf',state.popupData.rspfBonus.f,state.popupData.rspfBonus.single)">
								<text class="data-name">{{state.popupData.rspfBonus.f.n}}</text>
								<text class="data-value">{{state.popupData.rspfBonus.f.v}}</text>
							</td>
						</tr>
					</table>
				</view>
				<view class="popup-data ttg">
					<table>
						<tr>
							<td width="10%" rowspan="2" style="position: relative;" class="dangguan-bg">
								<image src="@/static/images/danguan.png"></image>
								<br>总<br>进<br>球
							</td>
							<td width="22%" :class="state.popupData.ttgBonus.q0.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q0,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q0.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q0.v}}</text>
							</td>
							<td width="22%" :class="state.popupData.ttgBonus.q1.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q1,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q1.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q1.v}}</text>
							</td>
							<td width="22%" :class="state.popupData.ttgBonus.q2.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q2,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q2.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q2.v}}</text>
							</td>
							<td width="22%" :class="state.popupData.ttgBonus.q3.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q3,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q3.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q3.v}}</text>
							</td>
						</tr>
						<tr>
							<td :class="state.popupData.ttgBonus.q4.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q4,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q4.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q4.v}}</text>
							</td>
							<td :class="state.popupData.ttgBonus.q5.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q5,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q5.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q5.v}}</text>
							</td>
							<td :class="state.popupData.ttgBonus.q6.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q6,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q6.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q6.v}}</text>
							</td>
							<td :class="state.popupData.ttgBonus.q7.x?'select-game-data':''"
								@click="selectData(state.popupData,'ttg',state.popupData.ttgBonus.q7,true)">
								<text class="data-name">{{state.popupData.ttgBonus.q7.n}}</text>
								<text class="data-value">{{state.popupData.ttgBonus.q7.v}}</text>
							</td>
						</tr>
					</table>
				</view>
				<view class="popup-data qbc">
					<table>
						<tr>
							<td width="10%" rowspan="3" style="position: relative;" class="dangguan-bg">
								<image src="@/static/images/danguan.png"></image>
								<br>半<br>全<br>场
							</td>
							<td width="30%" :class="state.popupData.bqcBonus.ss.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.ss,true)">
								<text class="data-name">{{state.popupData.bqcBonus.ss.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.ss.v}}</text>
							</td>
							<td width="30%" :class="state.popupData.bqcBonus.sp.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.sp,true)">
								<text class="data-name">{{state.popupData.bqcBonus.sp.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.sp.v}}</text>
							</td>
							<td width="30%" :class="state.popupData.bqcBonus.sf.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.sf,true)">
								<text class="data-name">{{state.popupData.bqcBonus.sf.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.sf.v}}</text>
							</td>
						</tr>
						<tr>
							<td :class="state.popupData.bqcBonus.ps.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.ps,true)">
								<text class="data-name">{{state.popupData.bqcBonus.ps.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.ps.v}}</text>
							</td>
							<td :class="state.popupData.bqcBonus.pp.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.pp,true)">
								<text class="data-name">{{state.popupData.bqcBonus.pp.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.pp.v}}</text>
							</td>
							<td :class="state.popupData.bqcBonus.pf.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.pf,true)">
								<text class="data-name">{{state.popupData.bqcBonus.pf.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.pf.v}}</text>
							</td>
						</tr>
						<tr>
							<td :class="state.popupData.bqcBonus.fs.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.fs,true)">
								<text class="data-name">{{state.popupData.bqcBonus.fs.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.fs.v}}</text>
							</td>
							<td :class="state.popupData.bqcBonus.fp.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.fp,true)">
								<text class="data-name">{{state.popupData.bqcBonus.fp.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.fp.v}}</text>
							</td>
							<td :class="state.popupData.bqcBonus.ff.x?'select-game-data':''"
								@click="selectData(state.popupData,'bqc',state.popupData.bqcBonus.ff,true)">
								<text class="data-name">{{state.popupData.bqcBonus.ff.n}}</text>
								<text class="data-value">{{state.popupData.bqcBonus.ff.v}}</text>
							</td>
						</tr>
					</table>
				</view>
				<view class="popup-data bf">
					<table>
						<tr>
							<td width="10%" rowspan="5" style="position: relative;" class="dangguan-bg">
								<image src="@/static/images/danguan.png"></image>
								<br>比<br>分
							</td>
							<td width="12.7%" :class="state.popupData.crsBonus.s10.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s10,true)">
								<p class="data-name">{{state.popupData.crsBonus.s10.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s10.v}}</p>
							</td>
							<td width="12.7%" :class="state.popupData.crsBonus.s20.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s20,true)">
								<p class="data-name">{{state.popupData.crsBonus.s20.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s20.v}}</p>
							</td>
							<td width="12.7%" :class="state.popupData.crsBonus.s21.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s21,true)">
								<p class="data-name">{{state.popupData.crsBonus.s21.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s21.v}}</p>
							</td>
							<td width="12.7%" :class="state.popupData.crsBonus.s30.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s30,true)">
								<p class="data-name">{{state.popupData.crsBonus.s30.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s30.v}}</p>
							</td>
							<td width="12.7%" :class="state.popupData.crsBonus.s31.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s31,true)">
								<p class="data-name">{{state.popupData.crsBonus.s31.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s31.v}}</p>
							</td>
							<td width="12.7%" :class="state.popupData.crsBonus.s32.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s32,true)">
								<p class="data-name">{{state.popupData.crsBonus.s32.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s32.v}}</p>
							</td>
							<td width="12.7%" :class="state.popupData.crsBonus.s40.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s40,true)">
								<p class="data-name">{{state.popupData.crsBonus.s40.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s40.v}}</p>
							</td>
						</tr>
						<tr>
							<td :class="state.popupData.crsBonus.s41.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s41,true)">
								<p class="data-name">{{state.popupData.crsBonus.s41.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s41.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s42.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s42,true)">
								<p class="data-name">{{state.popupData.crsBonus.s42.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s42.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s50.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s50,true)">
								<p class="data-name">{{state.popupData.crsBonus.s50.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s50.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s51.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s51,true)">
								<p class="data-name">{{state.popupData.crsBonus.s51.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s51.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s52.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s53,true)">
								<p class="data-name">{{state.popupData.crsBonus.s52.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s52.v}}</p>
							</td>
							<td colspan="2" :class="state.popupData.crsBonus.s53.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s53,true)">
								<p class="data-name">{{state.popupData.crsBonus.s53.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s53.v}}</p>
							</td>

						</tr>
						<tr>
							<td :class="state.popupData.crsBonus.s00.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s00,true)">
								<p class="data-name">{{state.popupData.crsBonus.s00.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s00.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s11.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s11,true)">
								<p class="data-name">{{state.popupData.crsBonus.s11.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s11.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s22.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s22,true)">
								<p class="data-name">{{state.popupData.crsBonus.s22.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s22.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s33.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s33,true)">
								<p class="data-name">{{state.popupData.crsBonus.s33.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s33.v}}</p>
							</td>
							<td colspan="3" :class="state.popupData.crsBonus.s44.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s44,true)">
								<p class="data-name">{{state.popupData.crsBonus.s44.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s44.v}}</p>
							</td>

						</tr>
						<tr>
							<td :class="state.popupData.crsBonus.s01.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s01,true)">
								<p class="data-name">{{state.popupData.crsBonus.s01.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s01.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s02.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s02,true)">
								<p class="data-name">{{state.popupData.crsBonus.s02.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s02.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s12.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s12,true)">
								<p class="data-name">{{state.popupData.crsBonus.s12.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s12.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s03.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s03,true)">
								<p class="data-name">{{state.popupData.crsBonus.s03.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s03.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s13.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s13,true)">
								<p class="data-name">{{state.popupData.crsBonus.s13.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s13.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s23.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s23,true)">
								<p class="data-name">{{state.popupData.crsBonus.s23.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s23.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s04.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s04,true)">
								<p class="data-name">{{state.popupData.crsBonus.s04.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s04.v}}</p>
							</td>
						</tr>
						<tr>
							<td :class="state.popupData.crsBonus.s14.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s14,true)">
								<p class="data-name">{{state.popupData.crsBonus.s14.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s14.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s24.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s24,true)">
								<p class="data-name">{{state.popupData.crsBonus.s24.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s24.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s05.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s05,true)">
								<p class="data-name">{{state.popupData.crsBonus.s05.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s05.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s15.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s15,true)">
								<p class="data-name">{{state.popupData.crsBonus.s15.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s15.v}}</p>
							</td>
							<td :class="state.popupData.crsBonus.s25.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s25,true)">
								<p class="data-name">{{state.popupData.crsBonus.s25.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s25.v}}</p>
							</td>
							<td colspan="2" :class="state.popupData.crsBonus.s35.x?'select-game-data':''"
								@click="selectData(state.popupData,'crs',state.popupData.crsBonus.s35,true)">
								<p class="data-name">{{state.popupData.crsBonus.s35.n}}</p>
								<p class="data-value">{{state.popupData.crsBonus.s35.v}}</p>
							</td>

						</tr>
					</table>
				</view>

				<view class="popup-footer">
					<button type="primary" size="mini" @click="closeMatchMoreDataModel">确 认</button>
				</view>
			</view>
		</su-popup>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		watch
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		footballPass
	} from '@/sheep/helper/lottery';
	import FootballApi from '@/sheep/api/sporttery/football';
	import UniCollapseItem from '@/uni_modules/uni-collapse/components/uni-collapse-item/uni-collapse-item.vue';
	import UniCollapse from '@/uni_modules/uni-collapse/components/uni-collapse/uni-collapse.vue';
	import SuPopup from '@/sheep/ui/su-popup/su-popup.vue';
	import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import footballData from './football-data.vue';



	//接收football父组件传了的数据
	const props = defineProps({
		modelValue: {
			type: String,
			default: "0"
		},
	});


	const state = reactive({
		showMatchMoreDataModel: false,
		datas: [],
		popupData: {},
		selectItems: [],
	});


	//发送给父组件的数据，
	const emit = defineEmits(['data-update']); // 声明要触发的事件

	function selectData(matchInfo, selectType, selectItem, single) {
		selectItem.x = selectItem.x ? false : true;
		const data = {
			matchId: matchInfo.matchId,
			matchNum: matchInfo.matchNum,
			selectItem: selectItem,
		};

		if (state.selectItems.length == 0) {
			if (selectItem.x) {
				state.selectItems.push(data);
			}
		} else {
			const s = state.selectItems.find(x => x.matchId == matchInfo.matchId && x.matchNum == matchInfo.matchNum && x
				.selectItem.c == selectItem.c);
			//不存在，倍选中，就添加
			if (!s && selectItem.x) {
				state.selectItems.push(data);

			}
			//存在，没有选中，就移除
			if (s && !selectItem.x) {
				const index = state.selectItems.indexOf(s);
				state.selectItems.splice(index, 1);
			}
		}
		const xuanList = state.selectItems.filter(x => x.matchId == matchInfo.matchId);
		matchInfo.selectItemNum = xuanList.length;

		const groupDatas = state.selectItems.reduce((map, item) => {
			const group = map.get(item.matchId) || []
			group.push(item)
			return map.set(item.matchId, group)
		}, new Map());
		const rdata = {
			selectNum: groupDatas.size, //总选择的场次
			selectMatchs: groupDatas //根据场次分组好的选项
		};

		//父组件用data-update属性来接收
		emit('data-update', rdata) // 触发事件并传递数据
	};


	async function getList() {
		const {
			code,
			data
		} = await FootballApi.getSellingMatchs({
			type: 0
		}); //0：表示混合,1表示关，2：表示2选1界面
		if (code !== 0) {
			return;
		}
		state.datas = data;
		state.datas.forEach(x => {
			x.showMatchData = false; //添加默认显示数据分析
		});
	}


	//打开选择更多按钮
	function openMatchMoreDataModel(match) {
		state.showMatchMoreDataModel = true;
		state.popupData = match;
	}
	//监控选择更多界面
	function matchMoreDataModelChange(e) {
		state.showMatchMoreDataModel = e.show;
	}
	//关闭选择更多按钮
	function closeMatchMoreDataModel(match) {
		state.showMatchMoreDataModel = false;
	}

	function openHasSelectMatchDataModel(e) {
		state.showHasSelectMatchModel = true;
	}
	// 加载更多
	function loadMore() {
		// if (state.loadStatus === 'noMore') {
		//   return;
		// }
		// state.pagination.pageNo++;
		// getList(state.currentSort, state.currentOrder);
	}

	onLoad((options) => {
		getList();
	});

	// 上拉加载更多
	onReachBottom(() => {
		loadMore();
	});
</script>

<style lang="scss" scoped>
	/* 弹框整体样式 */
	.let-ball {
		color: red !important;
	}

	.desc-title {
		flex: 0 0 90rpx !important;
		/* 不扩展/不收缩/基础宽度150rpx */
		//min-width: 10rpx;
		//background-color: #f9f9f9; /* 测试用 */
	}

	.time-cell {
		width: 260rpx;
		/* 时间列也固定宽度 */
		min-width: 260rpx;
		flex-shrink: 0;
	}

	/* 其他单元格自动分配剩余空间 */
	.table-cell:not(.desc-title):not(.time-cell) {
		flex: 1;
	}

	.model-box {
		height: 70vh;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
	}

	.model-header {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.icon-check-round {
		font-size: 60rpx;
		color: #07C160;
	}

	.score-title {
		font-weight: bold;
		color: #333;
	}

	.model-content {
		flex: 1;
		padding: 0 30rpx;
		height: calc(70vh - 200rpx);
	}

	/* 数据区块样式 */
	.data-section {
		margin: 30rpx 0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
	}

	.data-table {
		width: 100%;
		border: 1rpx solid #eaeaea;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.table-row {
		display: flex;
		width: 100%;
		border-bottom: 1rpx solid #eaeaea;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.table-cell {
		flex: 1;
		//padding: 20rpx 10rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.header .table-cell {
		font-weight: bold;
		background-color: #f9f9f9;
		color: #333;
	}

	/* 分割线 */
	.divider {
		height: 20rpx;
		background-color: #f5f5f5;
		margin: 0 -30rpx;
	}

	/* 底部按钮 */
	.model-footer {
		padding: 0 10rpx;
	}

	.confirm-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background: linear-gradient(90deg, #FF5500, #FF9500);
		border-radius: 45rpx;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.collapse-item {
		padding-top: 5px;
	}

	.collapse-item-title {
		height: 15px;
		line-height: 15px;
		margin-bottom: 5px;
		font-size: 14px;
		color: #39b54a
	}

	.content {
		background-color: #f5f5f5;
	}

	.left {
		color: #ff557f;
		font-weight: bold;
	}

	.ml10 {
		margin-left: 10px;
	}

	.match-body {
		margin-top: 2px;
		padding: 7px 10px;
		background-color: white;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
	}

	.match-title {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.match-type {
		background-color: green;
		color: white;
		text-align: center;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

	.team-info {
		display: flex;
		flex-direction: row;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
	}

	.match-data {
		display: flex;
		flex-direction: row;
		justify-content: space-around;

	}

	.data-item {
		border: 1px solid #d1d1f5;
		border-radius: 4px;
		margin: 2px 2px;
		padding: 10px 5px;
		text-align: right;
		width: 90px;
		background-color: #f5f5f5;
		font-size: 14px;

	}

	.gray-text {
		color: gray;
	}

	.match-time {
		margin-left: 8px;
		margin-right: 8px;
	}

	.team-name {
		font-size: 14px;
		font-weight: bold;
		padding: 5px 5px;
	}

	.data-item-view {
		margin-right: 20%;
	}

	.game-rs {
		font-weight: bold;
		margin-left: 5px;
		margin-right: 5px;
	}

	.game-ps {
		color: gray;
	}

	.game-rq-red {
		color: red;
	}

	.game-rq-green {
		color: green;
	}

	.select-game-data {
		background-color: #cf1409;

	}

	.select-game-data text {
		color: #f5f5f5;
	}

	.select-game-data p {
		color: #f5f5f5;
	}

	.match-fenxi {
		background-color: red;
	}

	.popup-body {
		margin: 10px 10px;
	}

	.popup-data {
		display: flex;
		flex-direction: row;

	}

	.popup-data-left {
		border: 1px solid #fc3123;
		padding: 5px 5px;
		margin: 5px 3px;
		width: 20px;
		text-align: center;
		border-radius: 3px;
	}

	.text-orientation-upright {
		writing-mode: vertical-rl;
		/* 从右到左的垂直排列 */
		text-orientation: upright;
		/* 文本方向保持直立 */
	}

	.popup-match-data {
		width: 90%;
	}

	.popup-match-type {
		background-color: green;
		color: white;
		text-align: center;
		border-radius: 3px;
		padding: 5px 5px;
		font-size: 10px;
	}

	table {
		width: 100%;
		text-align: center;
		border-collapse: collapse;
		font-size: 13px;
		border-radius: 5px;
		margin-top: 15px;
	}

	table tr {
		height: 30px;
	}

	table td {
		border: 1px solid #ccc;
	}

	image {
		width: 25px;
		height: 25px;
		position: absolute;
		left: -3px;
		top: -3px;
	}

	.data-name {
		font-weight: bold;
	}

	.data-value {
		color: #969696;
		margin-left: 5px;
	}

	.dangguan-bg {
		background: #ffebeb;
		color: #f24444;
	}

	.dangguan-no-bg {
		background: #dbefff;
		color: #1d91f2;
	}

	.popup-footer {
		text-align: center;
		padding: 10px 30px;
		display: flex;
		justify-content: space-around;
	}
</style>